<template>
  <div class="detailcontent">
    <div class="msg">
      <div class="text">
        <div class="ioc">厂商：Graphios</div>
        <div>
          <span class="focus">关注：55</span>
          <span class="post">帖子：102</span>
        </div>
      </div>
      <div class="score">
        <div class="img">
          <img src="@/assets/taptap.png" alt="taptap" />
        </div>
        9.9
      </div>
    </div>
    <div class="btn">前往App Store</div>
    <div class="totext">前往App Store</div>
    <div class="gpl">
      <div class="gz"><span class="iconfont icon-game"></span> 关注</div>
      <div class="pj"><span class="iconfont icon-game"></span> 评价</div>
      <div class="lt"><span class="iconfont icon-game"></span> 论坛</div>
    </div>
    <gallery :galleryLists="galleryLists"></gallery>
    <div class="jj">
      <div class="jjtitle">简介<span>查看全部</span></div>
      <div class="jjcontent">
        Pigeon
        Games是由初创通过bilibili视频网站发起的、由众多节奏类游戏爱好者组成的完全用爱发电的项目组。我们希望Phigros新颖的游戏模式和精心制作的插画与关卡可以让你感受到节奏类游戏的魅力。
      </div>
    </div>
    <div class="jj">
      <div class="jjtitle">更新<span>查看全部</span></div>
      <div class="jjcontent">
        Pigeon
        Games是由初创通过bilibili视频网站发起的、由众多节奏类游戏爱好者组成的完全用爱发电的项目组。我们希望Phigros新颖的游戏模式和精心制作的插画与关卡可以让你感受到节奏类游戏的魅力。
      </div>
    </div>
    <div class="jj">
      <div class="jjtitle">评分 & 评价<span>查看全部</span></div>
      <div class="jjcontent">
        Pigeon
        Games是由初创通过bilibili视频网站发起的、由众多节奏类游戏爱好者组成的完全用爱发电的项目组。我们希望Phigros新颖的游戏模式和精心制作的插画与关卡可以让你感受到节奏类游戏的魅力。
      </div>
    </div>
  </div>
</template>
<script>
import gallery from "./gallery";
import axios from "axios";
export default {
  name: "detailcontent",
  data() {
    return {
      galleryLists: [],
    };
  },
  components: {
    gallery,
  },
  mounted() {
    this.getGalleryData();
  },
  methods: {
    async getGalleryData() {
      let res = await axios.get("/api/discovery.json");
      res = res.data;
      if (res.ret && res.data) {
        const result = res.data;
        this.galleryLists = result.galleryLists;
      }
    },
  },
};
</script>
<style lang="scss" scoped>
.detailcontent {
  background: white;
  display: flex;
  flex-direction: column;
  padding: 0.2rem 0.2rem;
  .msg {
    display: flex;
    justify-content: space-between;
    .text {
      margin-left: 0.2rem;
      color: $fontGrayColor;
      display: flex;
      font-size: 0.24rem;
      flex-direction: column;
      justify-content: center;
      flex: 3;
      .ioc {
        & + div {
          margin-top: 0.2rem;
        }
      }
      .focus {
      }
      .post {
        margin-left: 0.2rem;
      }
    }
    .score {
      text-align: center;
      flex: 1;
      display: flex;
      font-size: 0.42rem;
      color: $themeColor;
      flex-direction: column;
      justify-content: center;
      .img img {
        width: 0.9rem;
      }
    }
  }
  .btn {
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 1rem;
    font-size: 0.32rem;
    margin-top: 0.2rem;
    width: 100%;
    height: 6vh;
    background: $themeColor;
    color: white;
  }
  .totext {
    text-align: center;
    font-size: 0.18rem;
    color: $fontGrayColor;
  }
  .gpl {
    padding: 0.4rem 0.2rem;
    justify-content: space-between;
    display: flex;
    .iconfont {
      color: $themeColor;
    }
  }
  .jj {
    margin-top: 1.2rem;
    .jjtitle {
      display: flex;
      justify-content: space-between;
      font-size: 0.4rem;
      font-weight: 700;
      & span {
        color: $themeColor;
        font-size: 0.24rem;
        margin-right: 0.1rem;
      }
    }
    .jjcontent {
      margin-top: 0.2rem;
      @include multellipsis(3);
      line-height: 1.5em;
    }
  }
}
</style>